<template>
<div class="shouye" id="shouye">
  <header class="shouye-header">
    <div class="shouye-header-bottom">
    <img src="../assets/img/search.png">
      <input type="text" placeholder="请输入水果、功效、口感等" class="header-bottom-search">
    </div>
  </header>
  <main class="shouye-main">
     <div class="shouye-main-banner">
       <img src="../assets/img/bannershouye.png">
       <div class="shouye-banner-footer">
         <p>樱花在最灿烂的时候凋谢</p>
         <ul>
            <li></li>
            <li></li>
            <li class="active"></li>
         </ul>
       </div>
     </div>
     <div class="shouye-main-cont">
       <ul>
       <li><router-link to='BreakFirst'><img src="../assets/img/zaocan.png"><span>早餐</span></router-link></li>
       <li><router-link to='soybean'><img src="../assets/img/doujiang.png"><span>豆浆</span></router-link></li>
       <li><router-link to='HealthyDrinking'><img src="../assets/img/guozhi.png"><span>健康饮品</span></router-link></li>
       <li><router-link to='soup'><img src="../assets/img/jinglitang.png"><span>精力汤</span></router-link></li>
       <li><router-link to='sauce'><img src="../assets/img/jiangliao.png"><span>酱料磨粉</span></router-link></li>
       <li><router-link to='index'><img src="../assets/img/zaocan.png"><span>宝宝辅食</span></router-link></li>
       </ul>
       
     </div>
     <div class="shouye-main-hot">
       <div class="shouye-main-tuijian"><span></span>今日推荐<span></span></div>
       <div class="shouye-main-hot-cont">
         <ul>
           <li><img src="../assets/img/xiyou.png"><span>西柚银耳汁</span><p>西柚的功效有减肥、美白、养眼美容、低脂蛋白、低脂肪、护心脏、低热量、防心脏病...银耳功效</p></li>
            <li><img src="../assets/img/xiyou.png"><span>西柚银耳汁</span><p>西柚的功效有减肥、美白、养眼美容、低脂蛋白、低脂肪、护心脏、低热量、防心脏病...银耳功效</p></li>
         </ul>
       </div>
     </div>
  </main>
  <footer class="shouye-footer">
    <ul>
      <li><router-link to='shouye'><img src="../assets/img/mifang.png"><span>秘方</span></router-link></li>
      <li><router-link to='chufang'><img src="../assets/img/chufang.png"><span>厨房</span></router-link></li>
      <li><router-link to='liaoshouye'><img src="../assets/img/liaoliaoshouye.png"><span>聊聊</span></router-link></li>
      <li><router-link to='weidenglu'><img src="../assets/img/wode.png"><span>我的</span></router-link></li>
    </ul>
  </footer>
  <div class="zaixian-pos"><router-link to='zianxian'>在 线 客 服</router-link></div>
  <div class="yijian-pos" ><router-link to='yijian'>意 见 反 馈</router-link></div> 
</div> 

</template>
  
<!-- <script src="../assets/js/swiper.jquery.min.js"></script>
<script src="../assets/js/jquery-1.12.4.min.js"></script> -->
<script>

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
   @import url(../assets/css/common.css);
   @import url(../assets/less/common.less);
   @import url(../assets/less/shouye-header.less);
   @import url(../assets/less/shouye-main.less);
</style>
